<template>
	<div>
		<van-nav-bar fixed="true">
			  <template #left>
				  <span style="font-size: 17px;" @click="chooseCity()">成人疫苗 · {{citem}}</span>
				  </template>
			  <template #right>
				<van-row>
				  <van-col span="3">
					  <van-icon name="ellipsis" size="22" @click="a()" style="color: #2C3E50;"/>
				  </van-col>
				  <van-col span="15">  </van-col>
				  <van-col span="3"><van-icon name="close" size="22" @click="b()" style="color: #2C3E50;" /></van-col>
				</van-row>
			    
			  </template>
		</van-nav-bar>
		<div style="margin-top: 50px;">
			<van-row>
				<van-col span="24" style="margin-top: 5px;">
					<van-image
					  width="100%"
					  height="5rem"
					  fit="contain"
					  src="http://xphdata.oss-cn-beijing.aliyuncs.com/c7a67e7056254b35bd8480395e9ded1a_QQ%E5%9B%BE%E7%89%8720211026215817.png?Expires=1666793000&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=ZxYACfZz9y2dDSNEGCV3xdpZJ4c%3D"
					  radius="10px"
					/>
				</van-col>
			</van-row>
		</div>
		
		<div class="van-doc-card">
			<van-row>
				<van-col span="24" style="margin-top: 5px;">
					
						<van-grid>
						  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/5a7b711dfd304596b98c2bd7eb6a4512_1.png?Expires=1666793497&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=%2FwRyyJiwmPBiEw69%2Fgz68OVVwLY%3D" text="新冠疫苗"/>
						  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/fb466609f87843d3a700b366223ede58_2.png?Expires=1666793589&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=e0jM5CS0iSa7TAOKL42%2BzDQRYe8%3D" text="9价HPV" />
						  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/890665bbcbaf4a97836a00d3380dab4d_3.png?Expires=1666793708&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=VfqVn5BLTP73%2BzXI8mjGTEG8mf0%3D" text="4价HPV" />
						  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/7aafcdc8d9a648dea8c6f3d253eea317_4.png?Expires=1666793735&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=N6hhwd%2Fg6GuVzKSuBnA5Fr7BMeI%3D" text="2价HPV" />
						</van-grid>
						<van-grid>
						  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/ecf4299177d240519a9aba49dd00d3ad_5.png?Expires=1666793774&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=U6vuhRB8TsxFcmrDXlGRLdnpmtw%3D" text="流感疫苗" />
						  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/acc4c7b12ff0416b8849653a7e5d5482_6.png?Expires=1666793880&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=lmIy9bxH9ulPSkIQVYNFRNAcvwY%3D" text="带状疱疹" />
						  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/ecfe303dce5c422980d688690abe0f72_7.png?Expires=1666793909&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=4VGtigfmss4SlaRWDKaeE0giybg%3D" text="23价肺炎" />
						  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/e9780f6450524b10802341194f2b8283_8.png?Expires=1666793929&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=9BT2Iww1RJQf9cVH3zHoHn3vIJ8%3D" text="乙肝疫苗" to="/yg"/>
						</van-grid>
					
				</van-col>
			</van-row>
		</div>
		<van-row>
			<van-col span="24" style="margin-top: 5px;">
				<van-grid :column-num="2" style="icon-size:40px;">
				  <van-grid-item icon="photo-o"  text="帮我选苗" />
				  <van-grid-item icon="photo-o" text="抢苗助手" />
				</van-grid>
			</van-col>
		</van-row>
		<van-row>
			<van-col span="24" style="margin-top: 5px;">
				<van-swipe :autoplay="3000" lazy-render style="height:5rem">
				  <van-swipe-item v-for="image in images" :key="image" style="height: 50px;">
				    <img :src="image" />
				  </van-swipe-item>
				</van-swipe>
			</van-col>
		</van-row>
		<van-row>
			<van-col span="24">
				<van-grid>
				  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/46d2d623848544fa8c041e0c5a3ef09e_1.png?Expires=1666881316&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=QqUgBykQ7RVE4aiA%2FGBDjT1%2FVho%3D" text="疫苗百科" />
				  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/78c81bea77a2489eb7f95875cf4381d7_2.png?Expires=1666881445&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=YlH6qP6n5okzUEXuMK1%2BNungd6M%3D" text="疫苗群" />
				  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/2ac3dd8122f948ffbd750fbbc5536477_3.png?Expires=1666881485&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=gMln4bQvGGhjn8DOUM7PVLjeihM%3D" to="/need" text="需求等记" />
				  <van-grid-item icon="http://xphdata.oss-cn-beijing.aliyuncs.com/a2f3ff458cc945b8926ef5f7b2a21780_4.png?Expires=1666881507&OSSAccessKeyId=LTAI5t8QA19CRR2V15oHyHW8&Signature=aY1cZjnyjCigJtb6uNz40RTmfyg%3D" text="咨询客服" />
				</van-grid>
			</van-col>
		</van-row>
		<div >
			<van-tabs>
			  <van-tab title="选苗攻略">
				  <div v-for="o in one">
					  <a :href="o.article">
						  <van-row >
						  	<van-col span="15">{{o.title}}</van-col>
						  	<van-col span="1"></van-col>
						  	<van-col span="8">
						  		<van-image width="80" height="80" :src="o.img" />
						  	</van-col>
						  </van-row>
					  </a>
						  
				  </div>
			  </van-tab>
			  <van-tab title="新冠问答">
				  <div v-for="o in two" style="margin-top: 10px;margin-bottom: 40px;">
					  <a :href="o.url">
				  		<van-row>
				  			<van-col span="24">{{o.title}}</van-col>
				  		</van-row>
					</a>
				  </div>
			  </van-tab>
			</van-tabs>
		</div>
		
		<div style="margin-bottom: 0px;margin-top: 50px;">
			<van-sticky>
				<van-tabbar v-model="active" route>
				  <van-tabbar-item replace to="/"  icon="smile-o">儿童疫苗</van-tabbar-item>
				  <van-tabbar-item icon="gem-o" to="/adult">成人疫苗</van-tabbar-item>
				  <van-tabbar-item icon="manager-o" to="/my1">我的</van-tabbar-item>
				</van-tabbar>
			</van-sticky>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				img:"",
				one:[],
				two:[],
				citem:this.$store.state.city,
				images : [
				      'https://img.yzcdn.cn/vant/apple-1.jpg',
				      'https://img.yzcdn.cn/vant/apple-2.jpg',
				    ]
			}
		},
		created() {
			this.axios.get("strategy/all").then((res) => {
				if(res.data.code == 200){
					this.one= res.data.data;
					console.log(this.one[0].img)
				}else{
					 this.$toast({
						message: "亲，网络异常！",
						icon: 'close'
					});
				}
			});
			this.axios.get("answer/all").then((res) => {
				if(res.data.code == 200){
					this.two= res.data.data;
				}else{
					 this.$toast({
						message: "亲，网络异常！",
						icon: 'close'
					});
				}
			})
		},
		methods:{
			chooseCity(){
				this.$router.push("/city");
			},
			a(){
				this.$toast.success('分享');
						  
			},
			b(){
				this.$router.push("/")
			}
		}
		
	}
</script>

<style>
	
</style>
